<!-- 三角角标组件 -
use:
   <ynTriangleBadge width="60" height="60" text="金8" bgcolor="green" fontsize="12"></ynTriangleBadge>
-->
<template>
  <!-- 定义三角面板，包含2个元素 三角绘制和文字 -->
  <view
    class="trianglePanel"
    :style="{
      'max-width': width + 'px',
      'min-width': width + 'px',
      'max-height': height + 'px',
      'min-height': height + 'px'
    }"
  >
    <view
      class="triangle-topright"
      :style="{
        'border-top': height + 'px solid ' + bgcolor,
        'border-left': width + 'px solid transparent'
      }"
    ></view>
    <!-- 用margin-left重叠三角 -->
    <view
      class="textbox"
      :style="{
        width: width * 0.5 + 'px',
        height: height * 0.5 + 'px',
        'font-size': fontsize + 'px',
        'margin-left': width * -0.5 + 'px'
      }"
    >
      {{ text }}
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      //组件背景颜色
      bgcolor: {
        type: String,
        default: 'blue'
      },
      width: {
        type: String,
        default: '50'
      },
      height: {
        type: String,
        default: '50'
      },
      text: {
        type: String,
        default: 'N'
      },
      // 一般字体大小是12px 网页端不能再小了  移动端可以再小 可以显示出来
      fontsize: {
        type: String,
        default: '12'
      }
    },
    data() {
      return {}
    },
    methods: {},
    // computed相当于属性的一个实时计算
    computed: {}
  }
</script>

<style>
  .trianglePanel {
    display: flex;
    align-self: flex-end;
    color: white;
    /* border: red 1px solid; */
  }

  .textbox {
    align-self: flex-start;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    margin: 1px;
    /* 字符空格不忽略 */
    white-space: pre;
    word-break: break-all;
  }

  /* 右上三角	上 左有宽度  下 右 无宽度 */
  .triangle-topright {
    /*   top:0;
   left:0; */
    z-index: 0;
    width: 0;
    height: 0;
  }
</style>
